<template>
  <div>
    <div id="container" style="width:78vw;height:70vh" />
    <div id="panel"></div>
  </div>
</template>

<script>

export default {
  name: 'amaps',
  props: {
    longitudeandlatitude:{
      start_latitude:'',
      start_longitude:'',
      end_latitude:'',
      end_longitude:''
    }
  },
  data() {
    return {
      firstArr: [116.397428, 39.90923], //中心点/初始坐标
      map: "",
    }
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.initMap() //异步加载（否则报错initMap is not defined）
      // this.initroad()
    }, 1000)
  },

  methods: {
    // 初始化地图
    initMap() {
      this.map = new AMap.Map('container', {
        resizeEnable: true, // 窗口大小调整
        center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
        zoom: 13
      })
      const driving = new AMap.Driving({
        map: this.map,
        panel: "panel"
      });
      // 根据起终点经纬度规划驾车导航路线
      driving.search(new AMap.LngLat(this.longitudeandlatitude.start_longitude, this.longitudeandlatitude.start_latitude), new AMap.LngLat(this.longitudeandlatitude.end_longitude, this.longitudeandlatitude.end_latitude), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
          log.success('绘制驾车路线完成')
        } else {
          log.error('获取驾车数据失败：' + result)
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
#panel {
  position: fixed;
  background-color: white;
  max-height: 50%;
  overflow-y: auto;
  top: 200px;
  right: 5px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
